<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 -->
	<style>
		.contain {
			background-color: cornflowerblue;
			display: flex;
			flex-direction: row;
			/* row-reserve  column  column-reverse; */
			/* row（默认值）：主轴为水平方向，起点在左端。
				row-reverse：主轴为水平方向，起点在右端。
				column：主轴为垂直方向，起点在上沿。
				column-reverse：主轴为垂直方向，起点在下沿。 */
		}

		.div1 {
			width: 300px;
			height: 300px;
			background-color: greenyellow;
			margin: 10px;
		}

		.div2 {
			width: 300px;
			height: 300px;
			background-color: lavenderblush;
			margin: 10px;
		}

		.div3 {
			width: 300px;
			height: 300px;
			background-color: darkgoldenrod;
			margin: 10px;
		}
	</style>

</head>

<body>
	<div class="contain">
		<div class="div1">1</div>
		<div class="div2">2</div>
		<div class="div3">3</div>
	</div>
</body>

</html>